<template>
  <el-container>
    <div class="detail">
      <div class="detail-content">
        <div style="height:40px;">
            <el-button size="mini" style="float:right;" @click="$router.go(-1)">返回</el-button>
        </div>
        <p>交易订单</p><hr>
        <div class="detail-content-first">
          <div
            v-for="v of orderData"
            :key="v.label"
            class="detail-content-first-content"
          >
            <div style="display:flex;">  <p style="margin-right:100px">{{ v.label }}： </p> <p>{{ v.value }}</p></div>
          </div>
        </div>
        <div class="detail-content-first">
          <div
            v-for="v of orderData1"
            :key="v.label"
            class="detail-content-first-content"
          >
            <div style="display:flex;">  <p style="margin-right:100px">{{ v.label }}： </p> <p>{{ v.value }}</p></div>
          </div>
        </div>
      </div>
      <div class="detail-content">
        <p>支付信息</p><hr>
        <div class="detail-content-first">
          <div
            v-for="v of orderData2"
            :key="v.label"
            class="detail-content-first-content"
          >
            <div style="display:flex;">  <p style="margin-right:100px">{{ v.label }}： </p> <p>{{ v.value }}</p></div>
          </div>

        </div>
        <div class="detail-content-first">
          <div
            v-for="v of orderData3"
            :key="v.label"
            class="detail-content-first-content"
          >
            <div style="display:flex;">  <p style="margin-right:100px">{{ v.label }}： </p> <p>{{ v.value }}</p></div>
          </div>
        </div>
        <div class="detail-content-first">
          <div
            v-for="v of orderData4"
            :key="v.label"
            class="detail-content-first-content"
          >
            <div style="display:flex;">  <p style="margin-right:100px">{{ v.label }}： </p> <p>{{ v.value }}</p></div>
          </div>
        </div>
      </div>
      <div class="detail-content" style="border:none">
        <p>时间列表</p>
        <div class="detail-content-first">
          <div
            v-for="v of orderData6"
            :key="v.label"
            class="detail-content-first-content"
          >
            <div style="display:flex;">  <p style="margin-right:100px">{{ v.label }}： </p> <p>{{ v.value }}</p></div>
          </div>
        </div>
        <div class="detail-content-first">
          <div
            v-for="v of orderData7"
            :key="v.label"
            class="detail-content-first-content"
          >
            <div style="display:flex;">  <p style="margin-right:100px">{{ v.label }}： </p> <p>{{ v.value }}</p></div>
          </div>
        </div>
      </div>
    </div>
  </el-container>
</template>

<script>
import { sysAjax } from 'Ajax'
export default {
  name: 'SCANDETAIL',
  data() {
    return {
      dataList: {},
      orderData1:[
        {
          label: '终端流水号',
          value: ''
        },
        {
          label: '支付保单号',
          value: ''
        },
      ],
      orderData2:[
        {
          label: '支付方式',
          value: ''
        },
        {
          label: '支付状态',
          value: ''
        },
        {
          label: '支付类型',
          value: ''
        }
      ],
      orderData3:[
        {
          label: '交易金额',
          value: ''
        },
        {
          label: '手续费',
          value: ''
        },
        {
          label: '商家实收金额',
          value: ''
        },
      ],
      orderData4: [
        {
          label: '买家实付金额',
          value: ''
        },
        {
          label: '商家优惠金额',
          value: ''
        }
      ],
      orderData5: [
        {
          label: '买家实付金额',
          value: ''
        },
        {
          label: '商家优惠金额',
          value: ''
        }
      ],
      orderData6: [
        {
          label: '终端交易时间',
          value: ''
        },
        {
          label: '订单创建时间',
          value: ''
        }
      ],
      orderData7: [
        {
          label: '交易完成时间',
          value: ''
        },
        {
          label: '结算处理时间',
          value: ''
        }
      ],
    }
  },
  computed: {
    orderData() {
      return [
        {
          label: '门点名称',
          value: ''
        },
        {
          label: '交易终端号',
          value: ''
        },
        {
          label: '交易订单号',
          value: ''
        }
      ]
    }
  },
  created() {
    this.getMegss()
  },
  methods: {
    getMegss() {
      sysAjax.orderInfo({id: this.$route.query.id}).then((res)=>{
        this.dataList = res.records[0];
        this.orderData =  [
        {
          label: '门点名称',
          value: res.records[0].name
        },
        {
          label: '交易终端号',
          value: res.records[0].terminalNo
        },
        {
          label: '交易订单号',
          value: res.records[0].payOrderCode
        }
        ]
        this.orderData1 = [
        {
          label: '终端流水号',
          value: res.records[0].terminalRecordNo
        },
        {
          label: '支付保单号',
          value: res.records[0].warranty
        }
      ]
       this.orderData2 = [
        {
          label: '支付方式',
          value: res.records[0].payType == '010' ? '微信' : res.records[0].payType == '020' ? '支付宝' : res.records[0].payType == '060' ? 'QQ钱包' : 
                 res.records[0].payType == '100' ? '翼支付' :   res.records[0].payType == '140' ? '和包支付（仅限和包通道)' : res.records[0].payType == '150' ? '福卡支付' : '--'  
        },
        {
          label: '支付状态',
          value: {
                  1: "支付成功",
                  2: "转入退款",
                  3: "未支付",
                  4: "已关闭",
                  5: "用户支付中",
                  6: "已撤回",
                  7: "未支付支付超时",
                  8: "支付失败",
                }[res.records[0].payStatus]
        },
        {
          label: '支付类型',
          value: res.records[0].paymentType ==  1 ? '主动扫描' : '被动扫描'
        }
        ]
        this.orderData3 = [
          {
            label: '交易金额',
            value: res.records[0].amount
          },
          {
            label: '手续费',
            value: res.records[0].serviceCharge
          },
          {
            label: '商家实收金额',
            value:  res.records[0].officialReceipts
          },
        ]
        this.orderData4 = [
        {
          label: '买家实付金额',
          value: res.records[0].buyer
        },
        {
          label: '商家优惠金额',
          value: res.records[0].coupon
        }
        ]
        this.orderData6 = [
          {
            label: '终端交易时间',
            value: res.records[0].dealTime
          },
          {
            label: '订单创建时间',
            value: res.records[0].setUpTime
          }
        ]
        this.orderData7 = [
          {
            label: '交易完成时间',
            value: res.records[0].payTime
          },
          {
            label: '结算处理时间',
            value: res.records[0].settleTime
          }
        ]
      })
    }
  }

}
</script>

<style scoped lang='scss'>
.detail{
    display:flex;
    flex-direction: column;
    padding:20px;
    width:100%;
    &-content{
           border-bottom: 10px solid gray;
        width:100%;
        &-first{
            display:flex;
              &-content{
                  display:flex;width:30%
              }
        }
    }

}

</style>
